<template>
	<view class="content">
		
		<!-- 视频 -->
		<view class="video-box">
			<!-- https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/360e4b20-4f4b-11eb-8a36-ebb87efcf8c0.mp4 -->
			<video id="myVideo" :src="videoInfo.video_link" @error="videoErrorCallback" direction='90'>
			</video>
		</view>
		<!-- 手势点击隐藏输入框 -->
		<view class="gesture-bg" @tap="hiddenTool">
			<!-- 标题 -->
			<view class="video-brief">
				<view class="title">
					{{videoInfo.title}}
				</view>
				<view class="des">
					{{videoInfo.synopsis}}
				</view>
				<view class="tool">
					<!-- <view class="share" @click="clickShare">
						<text class="iconfont icon-fenxiang1"></text>分享
					</view> -->
					<view class="col" @click="clickCollection">
						<text :class="isCollection?'sel':''" class="iconfont icon-yishoucang"></text>收藏
					</view>
				</view>
			</view>
			<!-- 评论 -->
			<view class="comment-box">
				<view class="comment-header">
					<view class="left">
						<view class="">评论 {{commentCount}}</view>
					</view>
					<view class="right" @click.stop="showTool">
						<text class="iconfont icon-pinglun1"></text>发表评论
					</view>
				</view>
				<view class="comment-list">
					<view class="data" v-if="commentList.length > 0">
						<view class="list-item" v-for="(item,index) in commentList">
							<view class="avatar">
								<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
								<image v-else src="../../../../static/images/f.png" mode="aspectFill"></image>
							</view>
							<view class="content">
								<view class="c-top">
									<view class="author">{{item.nickname}}</view>
									<view class="time">{{item.comment_time}}</view>
								</view>
								<view class="c-des">{{item.content}}</view>
							</view>
						</view>
						<view class='loadingicon acea-row row-center-wrapper' @click="clickMore">
							<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
						</view>
					</view>
					<view class="nodata" v-else>
						暂无评论~
					</view>
				</view>
			</view>
			<!-- 更多推荐 -->
			<view class="foryou-box">
				<view class="yy-secion-header">
					<view class="left">
						<view class="line"></view>
						<view class="title">更多推荐</view>
					</view>
				</view>
				<view class="yy-video-box">
					<view class="yy-video-item" v-for="(item,index) in foryouList" @click="clickVideoDetail(item)">
						<view class="top-box">
							<image :src="item.image_input" mode="aspectFill"></image>
							<!-- 遮罩层 -->
							<view class="layerbox">
								<view class="center-img">
									<text class="yyfont yy-zanting"></text>
								</view>
								<view class="bot-time">
									<text class="yyfont yy-zanting1"></text>{{item.duration}}
								</view>
							</view>
						</view>
						<view class="bot-box">
							<view class="v-name yy-text-line yy-text-line1">{{ item.title }}</view>
							<view class="v-des yy-text-line yy-text-line1"> {{ item.synopsis }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="footer-safe"></view>
		
		<!-- 评论输入框 -->
		<view class="safe-tool" v-if="commentToolShow">
			<view class="comment-tool">
				<view class="input">
					<input placeholder="说点什么..." v-model="commentContent" placeholder-class="placeholder" @input="inputChange"  @focus="focus" @blur="blur" @keyboardheightchange="keyboardheightchange"/>
				</view>
				<view class="send" @click="clickSend">发送</view>
			</view>
			<view class="yy-safe-bh" :class="keyActive?'safe-hidden':''"> </view>
		</view>
	</view>
</template>

<script>
	import {
		videoDetail,
		videoCollect,
		getComment,
		addComment
	} from '@/api/home.js';

	import {
		mapGetters
	} from 'vuex';
	export default {
		computed: {
			...mapGetters(['viewColor', 'isLogin', 'uid','routeError']),
		},
		data() {
			return {
				video_id: '',
				loadTitle: '点击查看更多评论',
				loading: false,
				loadend: false,
				where: {
					'page': 1,
					'limit': 5,
				},
				commentCount: 0,
				isCollection: false,
				commentList: [],
				videoInfo: {},
				foryouList: [],
				commentToolShow:false,
				commentContent:'',
				keyActive:false,
			}
		},
		onLoad(ops) {
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			
			if (!ops || !ops.video_id) {
				return this.$util.Tips({
					title: '缺少视频参数'
				});
			}
			console.log('onload==>[id]' + ops.video_id)
			this.video_id = ops.video_id;
			this.getVideoDetail();
			
			this.getCommentList();
		},
		onPullDownRefresh() {
			console.log('rk==>refresh')
			this.loadend = false;
			this.where.page = 1;
			// this.where.limit = 3;
			this.clickMore();
		},
		onReachBottom() {
			this.clickMore();
		},
		onPageScroll(res) {
			this.commentToolShow = false;
		},
		methods: {
			videoErrorCallback(err) {
				console.log(JSON.stringify(err), 'video-')
			},
			/**
			 * 视频详情
			 */
			getVideoDetail() {
				let where = {
					'video_id': this.video_id,
					'uid': this.uid,
				}
				let that = this;
				videoDetail(where).then(res => {
					//console.log('rk==>[video]'+JSON.stringify(res)+'[videoid]'+that.video_id);
					let data = res.data;
					that.foryouList = data.list;
					that.videoInfo = data.info;
					that.isCollection = data.info.is_collect;
				});
			},
			/**
			 * 分享
			 */
			clickShare() {
				console.log('rk==>分享')
			},
			/**
			 * 收藏
			 */
			clickCollection() {
				let where = {
					'video_id': this.video_id,
					'uid': this.uid,
				};
				videoCollect(where).then(res => {
					let status = res.status;
					if (status == 200) {
						this.isCollection = !this.isCollection;
					}
					this.$util.Tips({
						title: res.message,
					});
				});

			},
			hiddenTool(){
				if(this.keyActive != false){
					this.keyActive = false;
					console.log('rk==>[ges]'+this.keyActive)
					return
				}
				this.commentContent = '';
				this.commentToolShow = false;
			},
			showTool(){
				this.commentToolShow = !this.commentToolShow;
				console.log('rk==>[coo]'+this.keyActive)
			},
			/**
			 * 发表评论
			 */
			clickSend() {
				if(this.commentContent.length<=0){
					return this.$util.Tips({
						title:'请输入评论的内容'
					});
				}
				
				let where = {
					'video_id':this.video_id,
					'uid':this.uid,
					'content':this.commentContent,
				}
				addComment(where).then(res => {
					if(res.status == 200) {
						this.commentContent = '';
						this.commentToolShow = false;
						this.where.page = 1;
						// this.where.limit = 3;
						this.getCommentList();
					}
					this.$util.Tips({
						title:res.message
					})
				});
				
			},
			/**
			 * 评论列表
			 */
			getCommentList() {
				let that = this;
				that.where.uid = this.uid;
				that.where.video_id = this.video_id;
				getComment(that.where).then(res => {
					uni.stopPullDownRefresh();

					if (that.where.page == 1) {
						that.commentList = [];
					}

					// console.log('rk==>[评论]'+JSON.stringify(res)+'[where]'+JSON.stringify(that.where));

					let resList = res.data.comment;
					let allCount = res.data.count;
					that.commentList = that.$util.SplitArray(resList, that.commentList);
					that.$set(that, 'commentList', that.commentList);
					that.$set(that, 'commentCount', allCount);
					let loadend = that.commentList.length >= allCount;

					console.log('rk==>[xx]'+allCount + '[xx]'+that.commentList.length+'[bool]'+loadend);

					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.where.page += 1;
					// that.where.limit = 20;
					that.loading = false;
				});

			},
			/**
			 * 更多
			 */
			clickMore() {
				if (this.loadend) {
					uni.stopPullDownRefresh();
					return
				}
				this.getCommentList();
			},
			/**
			 * 视频详情
			 */
			clickVideoDetail(item) {
				if(this.keyActive != false){
					this.keyActive = false;
					return
				}
				
				uni.redirectTo({
					url: '/pages/shops/subs_index/video/detail?video_id=' + item.video_id
				})
			},
			/**
			 * 键盘
			 */
			inputChange(){
				this.keyActive = true;
				console.log('rk==>[inputChange]'+this.keyActive)
				
				
			},
			focus() {
				setTimeout(()=>{
					this.keyActive = true;
					console.log('rk==>[focus]'+this.keyActive)
				},250);
			},
			blur(){
				this.keyActive = false;
				console.log('rk==>[blur]'+this.keyActive)
			},
			keyboardheightchange(e){
				console.log('rk==>[change]'+JSON.stringify(e.detail))
			}
		}

	}
</script>

<style lang="scss">
	.content {
		.video-box {
			width: 100%;
			display: flex;
			justify-content: center;

			video {
				width: 100%;
			}
		}

		.video-brief {
			background-color: #fff;
			padding: 30rpx 30rpx 20rpx;

			.title {
				font-size: $yy-title-font;
				font-weight: bold;
				color: $yy-title-col;
			}

			.des {
				margin: 10rpx 0;
				color: $yy-des-col;
			}

			.tool {
				padding: 10rpx 0 0;
				display: flex;

				.share {
					margin-right: 30rpx;
				}

				.iconfont {
					margin-right: 5rpx;
					color: #969696;
				}

				.sel {
					color: #ff0000;
				}
			}
		}

		.comment-box {
			background-color: #fff;
			margin-top: 15rpx;
			padding: 0 30rpx;

			.comment-header {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;

				.iconfont {
					margin-right: 5rpx;
				}
			}

			.comment-list {
				.nodata {
					color: #969696;
					display: flex;
					font-size: 26rpx;
					justify-content: center;
					padding: 20rpx 0;
				}

				.list-item {
					display: flex;
					margin-top: 20rpx;

					.avatar {
						width: 90rpx;
						height: 90rpx;
						border-radius: 90rpx;
						overflow: hidden;
					}

					image {
						width: 100%;
						height: 100%;
					}

					.content {
						border-bottom: 1rpx solid #d7d7d7;
						width: 600rpx;
						padding: 0 10rpx 0 15rpx;
						color: $yy-title-col;
					}

					.c-top {
						display: flex;
						justify-content: space-between;
					}

					.author {
						font-size: $yy-title-font;
						font-weight: bold;

					}

					.time {
						color: #969696;
					}

					.c-des {
						padding: 10rpx 0;
					}
				}

			}
		}

		.foryou-box {
			background-color: #fff;
			padding: 0rpx 30rpx;
			margin: 15rpx 0;
		}
		.safe-tool {
			position: fixed;
			bottom: 0;
			background-color: #e2e2e2;
			width: 100%;
			.comment-tool {
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-evenly;
			
				.input {
					width: 66%;
					height: 70rpx;
					background-color: #fff;
					border-radius: 90rpx;
					display: flex;
					align-items: center;
					padding: 0 30rpx;
			
					input {
						width: 100%;
						height: 100%;
					}
				}
				.send {
					width: 20%;
					height: 70rpx;
					background-color: $yy-main-col;
					border-radius: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
			}
		}
		.footer-safe {
			height: calc(110rpx + constant(safe-area-inset-bottom));
			height: calc(110rpx + env(safe-area-inset-bottom));
		}
		.safe-hidden {
			display: none;
		}
	}
</style>
